<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目适配方案</title>
    <link rel="stylesheet" href="fonts/style.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery.min.js"></script>
    

</head>
<body>
<!-- 最大的盒子容器 -->
<div class="viewport">
     <!-- 第一列 -->
    <div class="column">
        <!-- 公共面板pannel 概览区模块制作overview-->
        <div class="pannel overview">
            <div class="inner">
                <ul>
                    <li>
                        <h4>2,190</h4>
                        <span>
                            <i class="icon-arrow-up2" style="color: #006cff"></i>
                            设备总数
                        </span>
                    </li>
                    <!-- 2 -->
                    <li>
                        <h4>190</h4>
                        <span>
                            <i class="icon-arrow-up2" style="color: #6acca3;"></i>
                            季度新增
                        </span>
                    </li>
                    <!-- 3 -->
                    <li>
                        <h4>3,190</h4>
                        <span>
                            <i class="icon-arrow-up2" style="color: #6acca3;"></i>
                            运营设备
                        </span>
                    </li>
                    <!-- 4 -->
                    <li>
                        <h4>108</h4>
                        <span>
                            <i class="icon-arrow-down2" style="color: #ed3f35;"></i>
                            异常设备
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 监控区域 monitor -->
        <div class="pannel monitor">
            <div class="inner">
                <!-- tabs 切换标签 -->
                <div class="tabs">
                    <a href="javascript:;" class="active">故障设备监控</a>
                    <a href="javascript:;">异常设备监控</a>
                </div>
                <!-- 内容区域 第一个-->
                <div class="content" style="display: block;">
                    <div class="head">
                        <div class="col">故障时间</div>
                        <div class="col">设备地址</div>
                        <div class="col">异常代码</div>
                    </div>
                    <!-- 滚动区域 -->
                    <div class="marquee-view">
                        <div class="marquee">
                            <!-- <div class="row">
                                <span class="col">20180701</span>
                                <span class="col">北京市昌平西路金燕龙写字楼</span>
                                <span class="col">1000001</span>
                                <span class="icon-location"></span>
                                <span></span>
                            </div> -->
                            
                        </div>
                    </div>

                </div>
                <!-- 第二个 -->
                <div class="content" >
                    <div class="head">
                        <div class="col">异常时间</div>
                        <div class="col">设备地址</div>
                        <div class="col">异常代码</div>
                    </div>
                    <!-- 滚动区域 -->
                    <div class="marquee-view">
                        <div class="marquee">
                            <!-- <div class="row">
                                <span class="col">20180701</span>
                                <span class="col">北京市昌平西路金燕龙写字楼</span>
                                <span class="col">1000001</span>
                                <span class="icon-location"></span>
                                <span></span>
                            </div> -->
                                          
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 点位图 -->
        <div class="point pannel">
            <div class="inner">
              <h3>点位分布统计</h3>
              <div class="chart">
                <div class="pie"></div>
                <div class="data">
                  <div class="item">
                    <h4>320,11</h4>
                    <span>
                      <i class="icon-arrow-up2" style="color: #ed3f35"></i>
                      点位总数
                    </span>
                  </div>
                  <div class="item">
                    <h4>418</h4>
                    <span>
                      <i class="icon-arrow-down2" style="color: #eacf19"></i>
                      本月新增
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
    </div>  <!-- 第一列 ending-->
     <!-- 第二列 -->
    <div class="column">
        <!-- 地图模块 -->
        <div class="map">
          <h3>
            <span class="icon-codepen"></span>
            设备数据统计
          </h3>
          <div class="chart">
            <div class="geo"></div>
          </div>
        </div>
        <!-- 用户统计模块 -->
        <div class="users pannel">
            <div class="inner">
              <h3>全国用户总量统计</h3>
              <div class="chart">
                <div class="bar"></div>
                <div class="data">
                  <div class="item">
                    <h4>120,899</h4>
                    <span>
                      <i class="icon-arrow-up2" style="color: #ed3f35"></i>
                      用户总量
                    </span>
                  </div>
                  <div class="item">
                    <h4>248</h4>
                    <span>
                      <i class="icon-arrow-up2" style="color: #eacf19"></i>
                      本月新增
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
    </div>
     <!-- 第三列 -->
    <div class="column">
          <!-- 订单 -->
          <div class="order pannel">
            <div class="inner">
              <!-- 筛选 -->
              <div class="filter">
                <a href="javascript:;" class="active">365天</a>
                <a href="javascript:;">90天</a>
                <a href="javascript:;">30天</a>
                <a href="javascript:;">24小时</a>
              </div>
              <!-- 数据 -->
              <div class="data" style="display: block;">
                <div class="item">
                  <h4>20,301,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>99834</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
              <!-- 2 -->
              <div class="data" >
                <div class="item">
                  <h4>30,200,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>96983</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
              <!-- 3 -->
              <div class="data" >
                <div class="item">
                  <h4>20,301,987</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>83455</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
               <!-- 4 -->
               <div class="data" >
                <div class="item">
                  <h4>40,987,301</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>66834</h4>
                  <span>
                    <i class="icon-arrow-up2" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 销售额 -->
        <div class="sales pannel">
            <div class="inner">
              <div class="caption">
                <h3>销售额统计</h3>
                <a href="javascript:;" class="active" data-type="year">年</a>
                <a href="javascript:;" data-type="quarter">季</a>
                <a href="javascript:;" data-type="month">月</a>
                <a href="javascript:;" data-type="week">周</a>
              </div>
              <div class="chart">
                <div class="label">单位:万</div>
                <div class="line"></div>
              </div>
            </div>
          </div>
           <!-- 渠道分布以及季度销售模块 -->
        <div class="wrap">
            <div class="channel pannel">
              <div class="inner">
                <h3>渠道分布</h3>
                <div class="data">
                  <div class="radar"></div>
                </div>
              </div>
            </div>
            <!-- 销售进度模块 -->
            <div class="quarter pannel">
              <div class="inner">
                <h3>一季度销售进度</h3>
                <div class="chart">
                  <div class="box">
                    <div class="gauge"></div>
                    <div class="label">50<small> %</small></div>
                  </div>
                  <div class="data">
                    <div class="item">
                      <h4>1,321</h4>
                      <span>
                        <i class="icon-dot" style="color: #6acca3"></i>
                        销售额(万元)
                      </span>
                    </div>
                    <div class="item">
                      <h4>150%</h4>
                      <span>
                        <i class="icon-dot" style="color: #ed3f35"></i>
                        同比增长
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
           <!-- 全国热榜模块制作 -->
        <div class="top pannel">
            <div class="inner">
              <div class="all">
                <h3>全国热榜</h3>
                <ul>
                  <li>
                    <i class="icon-angellist" style="color: #d93f36;"></i>
                    可爱多
                  </li>
                  <li>
                    <i class="icon-angellist" style="color: #68d8fe;"></i>
                    娃哈啥
                  </li>
                  <li>
                    <i class="icon-angellist" style="color: #4c9bfd;"></i>
                    喜之郎
                  </li>
                </ul>
              </div>
              <div class="province">
                <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                <div class="data">
                  <ul class="sup">
                    <!-- <li>
                      <span>北京</span>
                      <span>25,179 <s class="icon-up"></s></span>
                    </li>
                    <li>
                      <span>河北</span>
                      <span>23,252 <s class="icon-down"></s></span>
                    </li> -->
                  </ul>
                  <ul class="sub">
                    <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
    </div>
</div>

<!-- 引入js文件不用写入口函数 -->
<script src="./js/index.js"></script>
<script src="./js/china.js"></script>
<script src="./js/myMap.js"></script>
</body>
</html>